import React, { Component } from 'react'
import Banner from '#components/Banner/Banner'
import BlogItem from './BlogItem'
import Layout from '#components/Layout/Layout'

import './less/bloglist.less'
import * as APIS from '#api/articleApi'

class BlogList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      heightArray: [],
      list: []
    }
  }
  componentDidMount() {
    console.log(this.props,'props')
    this.imageLocation()
    window.addEventListener('resize', () => {
      this.imageLocation()
    })

    this.getArticle()
  }

  //获取文章列表
  getArticle() {
    APIS.getList().then(res => {
      this.setState(
        {
          list: res.data || []
        },
        () => {
          this.imageLocation()
        }
      )
    })
  }

  //获取最小下标
  getMinIndex(arr, min) {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] === min) {
        return i
      }
    }
  }

  imageLocation() {
    let box = document.querySelector('.blog-main')
    let container = document.querySelector('.blog-content')
    let aBox = container.children

    if (aBox.length <= 0) {
      return
    }

    let clientWidth = box.clientWidth
    let itemWidth = document.querySelector('.blog-item').offsetWidth
    let num =
      aBox.length < Math.floor(clientWidth / itemWidth)
        ? aBox.length
        : Math.floor(clientWidth / itemWidth)

    // console.log(num, itemWidth)

    container.style.width = num * itemWidth + 'px'
    container.style.margin = '0px auto'

    this.heightArray = []
    for (let i = 0; i < aBox.length; i++) {
      if (i < num) {
        this.heightArray.push(aBox[i].offsetHeight)
        aBox[i].style.position = 'static'
        aBox[i].style.left = 0
        aBox[i].style.top = 0
      } else {
        let minHeight = Math.min.apply(null, this.heightArray)
        aBox[i].style.position = 'absolute'
        let minIndex = this.getMinIndex(this.heightArray, minHeight)
        this.heightArray[minIndex] = this.heightArray[minIndex] + aBox[i].offsetHeight
        aBox[i].style.left = minIndex * itemWidth + 'px'
        // console.log(minIndex * itemWidth, 'minIndex * this.itemWidth')
        aBox[i].style.top = minHeight + 'px'
        console.log(minHeight, 'minHeight')
        document.querySelector('.blog-content').style.height =
          minHeight + 350 + 'px'
      }
    }
  }

  render() {
    return (
      <section className="blog">
        <Banner image={require('#assets/1.jpg')}>
          <div className="blog-banner">
            <section className="tagline">Hey There, I am m zw Hu,</section>
            <section className="desc">based in Hefei, China.</section>
            <section className="tagline">Just A Web Developer.</section>
            <section className="desc">
              Working at Winning and previously at Iflytek.😝
            </section>
          </div>
        </Banner>
        <div className="blog-main">
          <div className="blog-content">
            {this.state.list.map((v, k) => {
              return (
                <BlogItem
                  id={v._id}
                  key={k}
                  title={v.title}
                  description={v.description}
                  date={v.date}
                  image={v.image}
                />
              )
            })}
          </div>
        </div>
      </section>
    )
  }
}
export default Layout(BlogList)
